import { View, Text, TouchableOpacity } from 'react-native';
import React from 'react';
import PropTypes from 'prop-types';
import AntDesign from 'react-native-vector-icons/AntDesign';

const Tag = ({
    text, editable, index, delTag,
}) => (
    <View style={{
        marginRight: 10,
        marginBottom: 10,
        flexDirection: 'row',
        backgroundColor: '#FBF48E',
        borderRadius: 10,
        paddingLeft: 10,
        paddingRight: 10,
    }}
    >
        <Text style={{ fontSize: 18 }}>
            <Text style={{ color: '#0079FF', fontSize: 18 }}>{'<'}</Text>
            {text}
            <Text style={{ color: '#0079FF', fontSize: 18 }}>{'/>'}</Text>
        </Text>
        {
            editable && (
                <TouchableOpacity
                    onPress={
                        () => delTag(index)
                    }
                >
                    <AntDesign
                        name="close"
                        size={20}
                        color="#BCBCBC"
                        style={{ marginLeft: 5, marginTop: 3 }}
                    />
                </TouchableOpacity>
            )
        }
    </View>
);
Tag.defaultProps = {
    text: '',
    editable: false,
    index: '',
    delTag: () => {},
};
Tag.propTypes = {
    text: PropTypes.string,
    editable: PropTypes.bool,
    index: PropTypes.number,
    delTag: PropTypes.func,

};
export default Tag;
